<template>
  <div class="docker">
    <div
      :class="['docker__item', currentIndex === index ? 'docker__item-active' : '']"
      v-for="(item, index) in dockerlist"
      :key="index"
    >
    <router-link :to='item.to'>
      <div class="iconfont">{{ item.icon }}</div>
      <!-- <div class="iconfont" v-html="item.icon"></div> -->
      <div class="docker__item__name">{{ item.name }}</div>
    </router-link>
    </div>
  </div>
</template>
<script>

export default {
  name: 'docker',
  props: ['currentIndex'],
  setup () {
    const dockerlist = [
      { name: '首页', icon: '\ue688', to: { name: 'Home' } },
      { name: '购物车', icon: '\ue643', to: { name: 'CartList' } },
      { name: '订单', icon: '\ue719', to: { name: 'OrderList' } },
      { name: '我的', icon: '\ue60e', to: { name: 'Home' } }
    ]
    return { dockerlist }
  }
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
@import "@/style/viriables.scss";
.docker {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  padding: 0 0.18rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: .01rem solid $content-bgColor;
  color: $content-fontcolor;
  &__item {
    flex: 1;
    text-align: center;
    margin: 0.07rem 0;
    a{
      text-decoration: none;
      color: $content-fontcolor;
    }
    .iconfont {
      // color: $content-fontcolor;
      font-size: 0.18rem;
      // margin: .07rem 0 .02rem 0;
    }
    &__name {
      font-size: .2rem;
      transform: scale(0.5, 0.5);
      transform-origin: center top;
      // color: $content-fontcolor;
    }
  }
  &__item-active {
    a{
      color: #1fa4fc;
    }
  }
}
</style>
